<template>
  <div>
    <el-upload
      :ref="`uploadRow${index}`"
      class="upload-demo"
      :action="upload.url"
      accept=".png, .jpg, .pdf, .xls, .doc, .docx, .zip, .rar, .7z"
      :headers="upload.headers"
      :limit="1"
      :on-progress="handleFileUploadProgress"
      :on-success="
        (response, file) => {
          return handleFileSuccess(response, file);
        }
      "
    >
      <span style="color:#3171ee">上传附件</span>
    </el-upload>
  </div>
</template>

<script>
import { getFile } from "@/api/manage/manage";
import { getToken } from "@/utils/auth";
export default {
  props: {
    index:{
      type: Number,
      default: ''
    },
    approvalId:{
      type: String,
      default: ''
    },
  },
  inject: ["reload"],
  data() {
    return {
      // 上传文件参数 当前行
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传文件名称
        fileName: "请选择文件",
      },
    };
  },
  methods:{
    // 文件上传中处理 （当前行）
    handleFileUploadProgress(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, row,index) {
      console.log("文件上传成功", response, file ,row,index);
      // console.log('ref',this.$refs[`uploadRow${index}`]);
      // this.$refs[`uploadRow${index}`].clearFiles();
      if(response.code!=500&&response.data){
        let data = {
          fileName: file.name,
          fileUrl: response.data.fileUrl
        }
        getFile(this.approvalId,data).then(res=>{
          if(res.code === 200){
            this.$message.success("上传成功");
            this.reload();
          }
        })
      }else{
        this.$message.error(response.msg)
      }
    },
  }
};
</script>

<style lang="sass" scoped></style>
